<template>
  <div>
    <van-row>
        <van-col span="24">
            <van-divider />
            <div class="title" :style="wid">Weather {{weatherData.city}}</div>
            <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px'}" />
            <!-- <a href="../杨博2021年01月工资条.xlsx" download="杨博2021年01月工资条.xlsx">下载</a> -->
            <!-- <a href="../../assets/杨博2021年01月工资条.xlsx" download="杨博2021年01月工资条.xlsx">下载</a> -->
            <!-- <a href="/other/杨博2021年01月工资条.xlsx" download="杨博2021年01月工资条.xlsx">下载</a> -->
        </van-col>
        <van-col span="24">
            <van-col span="12">
                <van-icon :name="require(`../../assets/image/${weatherData.wea_night_img?weatherData.wea_night_img:'qing'}.png`)" size="90" />
            </van-col>
            <van-col span="12">
                <div class="Tdate">{{weatherData.date}}</div>
                <div class="Ttemperature">{{weatherData.tem}}℃<span style="margin-left:5px;">{{weatherData.win}}</span></div>
                <div class="TtemperatureRange">{{weatherData.tem2}}℃~{{weatherData.tem1}}℃</div>
            </van-col>
        </van-col>
        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px'}" />
    </van-row>
    <van-row justify="space-around">
      <van-col span="6" v-for="(item,index) in weatherData.hours" :key="index">
          <div class="date">{{item.hours}}</div>
          <van-icon :name="require(`../../assets/image/${item.wea_img?item.wea_img:'qing'}.png`)" />
          <div class="temperature">{{item.tem}}℃<span style="margin-left:5px;">{{item.win}}</span></div>
          <!-- <div class="temperatureRange">22℃~34℃</div> -->
      </van-col>
  </van-row>
  <!-- <van-area title="标题" :area-list="areaList" /> -->
  <van-popover v-model="showPopover">
    <van-grid
      square
      clickable
      :border="false"
      column-num="3"
      style="width: 240px;"
    >
      <van-grid-item
        v-for="i in 6"
        :key="i"
        text="选项"
        icon="photo-o"
        @click="showPopover = false"
      />
    </van-grid>
    <template #reference>
      <!-- <van-button type="primary">自定义内容</van-button> -->
    </template>
  </van-popover>
  </div>
</template>
<script>
import {ref,getCurrentInstance} from 'vue'
import { Toast } from 'vant';

export default {
  name:'home',
  setup() {
    // 获取全局变量得到$axios
    const {proxy} = getCurrentInstance()
    let weatherData = ref({})
    //初始化请求数据
    async function getWeather(){
      proxy.$axios.get(`/weather`).then(res=>{
        if(res.code=='200'){
          // console.log(a);
          weatherData.value = res.data
        }else{
          Toast.fail(res.message  );
        }
      }).catch(err=>{
        console.log(err);
      })
    }
    getWeather()

    const showPopover = ref(false);
    const wid = ref({width:`calc(100% - 0px)`,color:'red'})
    return{
      weatherData,
      showPopover,
      wid
    }
  }
}
</script>
<style lang="less" scoped>
.title {
    color: rgb(19, 152, 241);
    text-align: center;
}

div {
    text-align: center;
}

img {
    width: 100%;
    max-width: 100%;
}

/* 主显示区样式 一下分别为：日期 ， 当前温度 ， 今日温度范围  */
.Tdate {
    font-size: 18px;
}

.Ttemperature {
    font-size: 25px;
}

.TtemperatureRange {
    font-size: 17px;
}

/* 次显示区样式  以下分别为： 日期  ， 对应日期天气温度 ， 对应日期温度范围 */
.date {
    font-size: 15px;
}

.temperature {
    font-size: 20px;
}

.temperatureRange {
    font-size: 13px;
}
</style>